import React, { useState } from 'react'
import { ImageViewer } from 'antd-mobile'
import { connect } from 'react-redux'
import { rootState } from '@/store'
import { changeIsShowImage } from '@/store/actionCreators/goodStuff'
import { ShowImageWrapper } from './style'

interface ImageProps {
  changeIsShowImage: (a: boolean) => void,
  isShowImage: boolean,
  imageShowList: any[],
  imageDefaultIndex: string
}

const ShowImage: React.FC<ImageProps> = (props) => {
  const { 
    isShowImage,
    imageShowList,
    imageDefaultIndex
  } = props
  const { changeIsShowImage } = props
  return (
    <ShowImageWrapper>
        <ImageViewer.Multi
          images={imageShowList}
          visible={isShowImage}
          defaultIndex={Number(imageDefaultIndex)}
        />
        <div className='icon-close' onClick={() => changeIsShowImage(false)}><i className='iconfont icon-guanbixiao'></i></div>
    </ShowImageWrapper>
  )
}

export default connect(
  (state: rootState) => ({
      isShowImage: state.goodStuff.isShowImage,
      imageShowList: state.goodStuff.imageShowList,
      imageDefaultIndex: state.goodStuff.imageDefaultIndex,
  }),
  {
      changeIsShowImage
  }
)(ShowImage)